<template>
  <div id="flow-statistics-container">
    <box title="24小时流量统计" :more="true">
      <template v-slot:container>
        <div id="chart" class="my-charts"></div>
      </template>
    </box>
  </div>
</template>

<script>
import { fontSize } from '@/utils/filters/filters'
import box from '@/components/slot_box'
export default {
  name: 'flowStatistics',
  components: {
    box
  },
  data () {
    return {
      flow: {
        person: [920, 832, 1001, 734, 290, 330, 320], // 人流量
        car: [820, 932, 901, 934, 1290, 1330, 1320]// 车流量
      },
      Xspool: ['3', '6', '9', '12', '15', '18', '21']// 横坐标点
    }
  },
  computed: {
    getOptions () {
      return {
        xAxis: {
          name: '(时)',
          type: 'category',
          boundaryGap: true,
          data: this.Xspool,
          show: true
        },
        yAxis: {
          name: '人',
          type: 'value'
        },
        // 数据内容
        series: [
          {
            name: '车流量',
            data: this.flow.car,
            type: 'line',
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#2e8ae6'
              }, {
                offset: 1,
                color: 'transparent'
              }])
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#2e8ae6'
                }
              }
            }
          },
          {
            name: '人流量',
            data: this.flow.person,
            type: 'line',
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#facc14'
              }, {
                offset: 1,
                color: 'transparent'
              }])
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#facc14'
                }
              }
            }
          }
        ],
        // 字体配置
        textStyle: {
          color: '#fff'
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        // 图例设置
        legend: {
          icon: 'rect',
          x: fontSize(560),
          y: fontSize(10),
          data: ['车流量', '人流量'],
          textStyle: {
            color: '#ccc',
            fontSize: fontSize(28),
            lineHeight: fontSize(40)
          },
          itemWidth: fontSize(12),
          itemHeight: fontSize(36)
          // backgroundColor: 'rgba(255,255,255,.1)'
        },
        // 图例的颜色
        color: ['#2e8ae6', '#facc14']
      }
    }
  },
  methods: {
    chartResize () {
      const { myChart } = this
      myChart.resize()
      myChart.setOption(this.getOptions)
    }
  },
  mounted () {
    this.myChart = this.$echarts.init(document.getElementById('chart'))
    // myChart.resize({ width: 600, height: 600 })
    this.myChart.setOption(this.getOptions)
    window.addEventListener('resize', this.chartResize)
  },
  destroyed () {
    window.removeEventListener('resize', null)
  }
}
</script>

<style scoped>
.my-charts {
  width: 100%;
  height: 486px;
  /* padding-left: 50px; */
  box-sizing: border-box;
  color: #fff;
}
</style>
